<template>
    <div class="app">
           <!-- <keep-alive> -->
            <router-view></router-view>
    <!-- </keep-alive> -->
    <transition name="li" mode="out-in">
  </transition>
       <div class="downs" >
          <span @click="shouyes">首页</span>
          <span @click="bigbangs">爆爆团</span>
          <span @click="dingdans">订单</span>
          <span @click="mys">我的</span>
          <span @click="nulls">活动</span>
        </div>
        
  </div>
    
    
 
</template>

<script>
export default {
name:'down',
methods:{
    gets(index){
        this.currentIndex=index
    },
    mys(){
        this.$router.push('/down/my')
      },
      shouyes(){
        this.$router.push('/down/shouye')
      },
      bigbangs(){
        this.$router.push('/down/bigbang')
      },
      dingdans(){
        this.$router.push('/down/dingdan')
      },
      nulls(){
        this.$router.push('./sdasd')
      },

},


  
}
</script>

<style scoped>
.downs{
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-around;
    line-height: 50px;
    background-color: white;
    position: fixed;
    bottom: 0px;
}
.li-enter{
opacity: 0;
}
.li-enter-active{
  transition: all 1S linear;
}
.li-enter-to{
  opacity: 1;
}
  .down a{
  color: black;
  text-decoration: none;
}
.downs a.router-link-exact-active{
   text-decoration: none;
   color: rgb(255, 2, 2);
}
</style>